<script setup lang="ts">
import ChannelNav from "@/components/ChannelNav.vue"
import ArticleList from "@/components/ArticleList.vue"
import { onMounted, ref } from "vue";
import { getChannelAPI } from "@/api/channel";
import type { ChannelItem } from "@/types";
import { useChannel } from "@/hook/channel";
const { activeId, channelList } = useChannel()
</script>

<template>
    <!-- <ChannelNav :channels="channelList" :active-id="activeId" @update-active-id="updateActiveId"></ChannelNav> -->
    <!-- 频道 -->
    <ChannelNav :channels="channelList" :active-id="activeId" @update-active-id="activeId = $event"></ChannelNav>
    <!-- 列表 -->
    <ArticleList :active-id="activeId"></ArticleList>
    <!-- 二级路由容器 -->
    <div class="fix">
        <!-- 详情进入的页面 -->
        <router-view></router-view>
    </div>
</template>
<style scoped>
.fix {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
</style>